<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="form.schemename" style="width: 300px" placeholder="方案名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="form.approvalstate" style="width: 300px" placeholder="审批状态">
                    <el-option label="待审批" value="2"></el-option>
                    <el-option label="已审批" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">搜索</el-button>
            </el-form-item>
        </el-form>
        <!--        待审批列表页面-->
        <el-table :data="tableData" border>
            <el-table-column prop="name" align="center" label="方案名称"></el-table-column>
            <el-table-column prop="state" align="center" label="审批状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == '2'">待审批</span>
                    <span v-else>已审批</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="details(scope.row)">详情</el-button>
                    <el-button type="danger" size="mini" @click="approval(scope.row)"
                               v-show="scope.row.approval_fraction===undefined">审批
                    </el-button>
                    <el-button type="info" size="mini" @click="approvaled(scope.row)"
                               v-show="scope.row.approval_fraction!==undefined">已审批
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!--        专家评分详情弹出框-->
        <el-dialog title="详情" :visible.sync="dialogFormVisibleDetails" width="650px">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <!--                   方案信息-->
                <el-tab-pane label="方案信息" name="first">
                    <el-form :model="form">
                        <el-form-item label="项目名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="参评社会组织性质" :label-width="formLabelWidth">
                            <el-input v-model="form.nature " autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="评估年度" :label-width="formLabelWidth">
                            <el-input v-model="form.year" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="参评条件" :label-width="formLabelWidth">
                            <el-input v-model="form.condition " autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 160px; margin-left: 445px">
                        <el-button type="primary" @click="dialogFormVisibleDetails = false" style="margin-left: 95px">
                            关闭
                        </el-button>
                    </div>
                </el-tab-pane>
                <!--                申报信息-->
                <el-tab-pane label="申报信息" name="second">
                    <el-table :data="declarationTableData" border>
                        <el-table-column prop="content" align="center" label="评估内容"></el-table-column>
                        <el-table-column prop="create_time" align="center" label="申报时间"></el-table-column>
                        <el-table-column prop="company_name" align="center" label="申报组织"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <!--                    评估记录-->
                <el-tab-pane label="评估记录" name="third">
                    <el-table :data="assessmentTableData" border>
                        <el-table-column prop="state" align="center" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == '0'">退回</span>
                                <span v-else>通过</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="reason" align="center" label="退回原因"></el-table-column>
                        <el-table-column prop="create_time" align="center" label="操作时间"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <!--        审批弹出框-->
        <el-dialog title="审批" :visible.sync="dialogFormVisibleApproval" width="650px">
            <el-form :model="approvalform" class="ml100">
                <el-form-item label="审批分数" :label-width="formLabelWidth">
                    <el-select v-model="approvalform.approval_fraction">
                        <el-option
                                v-for="item in notemplatelist"
                                :key="item.id"
                                :label="item.level  + '-'+item.fraction "
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button type="primary" @click="save(approvalform.approval_fraction)">确定</el-button>
                <el-button @click="dialogFormVisibleApproval = false">关闭</el-button>
            </div>
        </el-dialog>
        <!--        已审批弹出框-->
        <el-dialog title="已审批" :visible.sync="dialogFormVisibleApprovaled" width="650px">
            <el-form :model="approvaledform" ref="approvalform" class="ml100">
                <el-form-item label="审批分数" prop="approval_fraction">
                    <el-input v-model="approvaled_fraction" class="w400" readonly></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                // a:'',
                //已审批分数
                approvaled_fraction: '',
                //名称,状态搜索
                form: {
                    schemename: '',  //方案名称
                    approvalstate: ''  //审批状态
                },
                cid: '',
                activeName: 'first',
                formLabelWidth: '150px',
                //待审批
                approvalform: {
                    id: '',  //方案id
                    approval_fraction: '', //审批分数
                },
                //已审批
                approvaledform: {
                    id: '',  //方案
                    approval_fraction: '', //已审批分数
                },

                tableData: [],// 待审批数据表
                declarationTableData: [],//申报信息数据表
                assessmentTableData: [],//评估记录数据表
                notemplatelist: [], //下拉列表
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                dialogFormVisibleDetails: false, //专家评分详情弹出框
                dialogFormVisibleApproval: false, //审批弹出框
                dialogFormVisibleApprovaled: false, //已审批弹出框
            }
        },

        methods: {
            //初始化
            async init() {
                const res = await this.$http('waitpprovalList',{
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                });
                console.log('专家评分', res)
                // const wres = await this.$http('assessmentdeclareList');
                // console.log('pingfen',res)
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //分页
            async handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;
                this.init();
            },
            //详情
            async details(row) {
                this.dialogFormVisibleDetails = true;
                this.form = row
                this.declarationTableData = await this.$http('assessmentdeclareList', {
                    programme_id: row.id
                });
                console.log('申报信息', this.declarationTableData)
                const Res = await this.$http('assessmentbackhistoryList', {
                    programme_id: row.id
                })
                console.log('评估记录', Res)
                this.assessmentTableData = Res
            },
            //待审批
            async approval(row) {
                console.log('dai', row)
                this.dialogFormVisibleApproval = true;
                this.cid = row.id
                this.notemplatelist = await this.$http('gettemplateList', {
                    template_code: row.template_code
                })
                console.log('zhibiao', this.notemplatelist)
            },
            //审批确定
            async save(parme) {
                console.log('parme', parme)
                const res = await this.$http('createApprovalList', {
                    id: this.cid,
                    approval_fraction: parme,
                })
                if (res === 'chenggong') {
                    this.$message({
                        message: '审批成功',
                        type: 'success'
                    });
                    this.dialogFormVisibleApproval = false;
                    this.init()
                } else {
                    this.$message({
                        message: '审批失败',
                        type: 'error'
                    });
                    this.dialogFormVisibleApproval = false;
                }
                this.init()
                console.log('审批', res)
            },
            //已审批
            async approvaled(row) {
                console.log('ssss', row)
                // this.a = row.approval_fraction
                this.approvaled_fraction = row.level + '-' + row.fraction
                // console.log(this.a)
                this.dialogFormVisibleApprovaled = true;
                this.approvaledform = row
            },
            //搜索
            async query() {
                const res = await this.$http('waitpprovalList', {
                    name: this.form.schemename,
                    state: this.form.approvalstate,
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },

        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>


<style scoped>
    .w400 {
        width: 330px
    }
</style>
